<template>
    <div class="profile">
      <h1>个人信息</h1>
  
      <!-- 用户头像 -->
      <div class="profile-picture">
        <img :src="user.avatar" alt="用户头像" class="avatar" />
      </div>
  
      <!-- 用户信息 -->
      <p>
        <strong>用户名：</strong>
        <span v-if="!isEditing">{{ user.name }}</span>
        <input v-else v-model="user.name" class="input-field" type="text" />
      </p>
      <p>
        <strong>邮箱：</strong>
        <span v-if="!isEditing">{{ user.email }}</span>
        <input v-else v-model="user.email" class="input-field" type="email" />
      </p>
      <p>
        <strong>性别：</strong>
        <span v-if="!isEditing">{{ user.gender }}</span>
        <input v-else v-model="user.gender" class="input-field" type="text" />
      </p>
      <p>
        <strong>年龄：</strong>
        <span v-if="!isEditing">{{ user.age }}</span>
        <input v-else v-model="user.age" class="input-field" type="number" />
      </p>
      <p>
        <strong>手机号：</strong>
        <span v-if="!isEditing">{{ user.phone }}</span>
        <input v-else v-model="user.phone" class="input-field" type="text" />
      </p>
  
      <!-- 编辑和修改操作 -->
      <div class="actions">
        <el-button v-if="!isEditing" type="primary" @click="editProfile">编辑个人信息</el-button>
        <el-button v-if="isEditing" type="success" @click="saveProfile">保存</el-button>
        <el-button v-if="isEditing" type="danger" @click="cancelEdit">取消</el-button>
        <el-button type="danger" @click="changePassword">修改密码</el-button>
      </div>
  
      <!-- 加载状态 -->
      <el-skeleton v-if="loading" rows="4"></el-skeleton>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted } from 'vue';
  import { ElMessage } from 'element-plus';
  
  // 模拟 API 调用获取用户信息
  const user = ref({
    name: '',
    email: '',
    gender: '',
    age: '',
    phone: '',
    avatar: ''
  });
  
  // 加载状态
  const loading = ref(true);
  
  // 编辑状态
  const isEditing = ref(false);
  
  // 模拟获取用户数据的函数
  const fetchUserProfile = () => {
    setTimeout(() => {
      // 假设从 API 获取的用户数据
      user.value = {
        name: '张三',
        email: 'zhangsan@example.com',
        gender: '男',
        age: 28,
        phone: '13800000000',
        avatar: 'https://th.bing.com/th?id=OIP.VnqbqHI999-VVVkUOWBcMwAAAA&w=250&h=250&c=8&rs=1&qlt=90&o=6&dpr=1.9&pid=3.1&rm=2'
      };
      loading.value = false;
    }, 1500); // 模拟延迟加载
  };
  
  onMounted(() => {
    fetchUserProfile();
  });
  
  // 编辑个人信息
  const editProfile = () => {
    isEditing.value = true;
  };
  
  // 保存个人信息
  const saveProfile = () => {
    // 在此处可以进行保存操作（比如通过 API 调用）
    ElMessage({
      message: '个人信息已保存',
      type: 'success'
    });
    isEditing.value = false;
  };
  
  // 取消编辑
  const cancelEdit = () => {
    // 重新加载用户数据，取消编辑
    fetchUserProfile();
    isEditing.value = false;
  };
  
  // 修改密码
  const changePassword = () => {
    ElMessage({
      message: '修改密码功能待开发',
      type: 'warning'
    });
  };
  </script>
  
  <style scoped>
  .profile {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    min-height: 100vh; /* 使页面充满整个视口 */
  }
  
  h1 {
    font-size: 28px;
    margin-bottom: 20px;
  }
  
  .profile-picture {
    margin-bottom: 20px;
  }
  
  .avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
  }
  
  p {
    font-size: 16px;
    margin-bottom: 10px;
    text-align: center;
  }
  
  .input-field {
    padding: 8px;
    border-radius: 4px;
    border: 1px solid #ccc;
    outline: none;
  }
  
  .actions {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    gap: 10px;
  }
  
  .el-button {
    margin-right: 0;
  }
  </style>
  